This article explains how to manage icons, including Social Media Icons, for your Website and Mailings.
Social Media Icons
All Social Media icons will be automatically shown in the last column of your website footer after the social media URLs are configured in the Control Panel > Core >Social Links.
Almost all known Social Media icons can be used. Fill in the correct URL, and the code will do the rest.
The default social media icons all feature a circle with the icon inside. Default and roll-over colours are automatically applied from the website CSS to reflect the rest of your website styling:
Upon request, it is also possible to use a different icon set without the circles:
Your design team can also create a truly custom icon set. Peppered can help to convert the design into a usable .svg file, or your design team can make the .svg file. The file should contain all icons with their exact names, but the design can be anything you want.
Download the .svg file as a template for your own social icon designs on the website. Keep the names of the icons as provided in the file:
More information about the website footer can be found in the website footer article.
Social Media Icons in your Mailing Templates
Our Professional Services team will configure these when building your Mailing Template.
Story Types
Upload a png-file for each Story Type in the Stories > Story types module:
Genres & Tags
Icons can be added by using the Font fantastic four icon codes (Font Awesome Icons) in the name of the genre, for example: <i class="fa fa-tag" aria-hidden="true"></i> comedy will add a Tag icon in front of the name “comedy”.
Other Icons
Please use these only for light lists, anything in detail should use section titles to break out content.
Several website icons can be changed by uploading a new .svg file in the Dashboard > Core section. These icons include:
- avatar (My Account icon)
- cart (The Shopping cart icon)
- search (Search icon)
- x (For closing search box, etc)
- empty list (When no items were found during the search or a calendar filter)
Related articles